import React, { Component } from 'react';
import { Button, Icon, Form, Input, Select, Checkbox } from 'antd';
import styles from './index.less';

class AddMessage extends Component {

    // static getDerivedStateFromProps(nextProps) {
    //     // Should be a controlled component.    
    //     console.log(nextProps,'0000')     
    //     if ('value' in nextProps) {
    //       return {
    //         aaa:nextProps.formItem,        
    //       };
    //     }
    //     return null;
    // }
    
    constructor(props) {
        super(props);       
        this.state = {
            formItem: props.formItem||[]
        };
    }

    componentWillMount() {
        window.Isoption = false;
      }

    componentDidMount() {
        window.Isoption = true;
        this.props.onRef(this)
    }
    // 删除留言
    remove = (index) => {
       
        const { formItem } = this.state;
        formItem.splice(index, 1);
        this.setState({
            formItem
        })
        this.setFormValue('message',formItem)
    }
    // 添加留言
    add = () => {
        const { formItem } = this.state;
        if (formItem.length > 9) {
            return;
        }
        formItem.push({ name: `留言${formItem.length + 1}`, type: 'text', required: false, datetime: false, multiple: false });
        this.setState({
            formItem
        })
        this.setFormValue('message',formItem)
    }
    // 留言标题
    msgNameChange = (e, index) => {
        const { formItem } = this.state;
        const msgName = e.target.value;

        formItem[index].name = msgName;
        this.setState({
            formItem,
        })
        this.setFormValue('message',formItem)
    }
    // 商品留言类型切换
    selectChange = (val, index) => {
        const { formItem } = this.state;
        const msgType = val;

        formItem[index].type = msgType;
        this.setState({
            formItem,
        })
        this.setFormValue('message',formItem)
    }
    // 多行
    onMultipleLines = (e, index) => {
        const { formItem } = this.state;
        const multipleLines = e.target.checked;

        formItem[index].multiple = multipleLines;
        this.setState({
            formItem,
        })
        this.setFormValue('message',formItem)
    }
    // 必填
    onRequired = (e, index) => {
        const { formItem } = this.state;
        const onRequired = e.target.checked;

        formItem[index].required = onRequired;
        this.setState({
            formItem,
        })
        this.setFormValue('message',formItem)
    }
    // 包含日期
    onHasDate = (e, index) => {
        const { formItem } = this.state;
        const hasDate = e.target.checked;

        formItem[index].datetime = hasDate;
        this.setState({
            formItem,
        })
        this.setFormValue('message',formItem)
    }

    setFormValue= (key,value) => {
        const {_this}=this.props;
        if(_this){
            _this.props.form.setFieldsValue({
                ["" + (() => key)()]: value,
            });
        }
    }

    render() {
      
        return (
            <div>
                {
                    this.state.formItem && this.state.formItem.map((item, index) => (
                        <div className={styles.messageBox} key={index}>
                            <Input
                                maxLength={5}
                                value={item.name}
                                style={{ width: '80px' }}
                                onChange={(e) => this.msgNameChange(e, index)}
                                addonAfter={(
                                    <Select value={item.type} style={{ width: 170 }} onChange={(val) => this.selectChange(val, index)}>
                                        <Select.Option value="text">文本格式</Select.Option>
                                        <Select.Option value="number">数字格式</Select.Option>
                                        <Select.Option value="mail">邮件</Select.Option>
                                        <Select.Option value="date">日期</Select.Option>
                                        <Select.Option value="time">时间</Select.Option>
                                        <Select.Option value="idCard">身份证号</Select.Option>
                                        <Select.Option value="picture">图片</Select.Option>
                                        <Select.Option value="phoneNo">手机号</Select.Option>
                                    </Select>)} />
                            <span className={styles.checkBoxStyle}>
                                {
                                    item.type == 'text' &&
                                    <Checkbox onChange={(e) => this.onMultipleLines(e, index)} checked={item.multiple}>多行</Checkbox>
                                }
                                {
                                    item.type == 'time' &&
                                    <Checkbox onChange={(e) => this.onHasDate(e, index)} checked={item.datetime}>含日期</Checkbox>
                                }
                                <Checkbox onChange={(e) => this.onRequired(e, index)} checked={item.required}>必填</Checkbox>
                                <a href="javascript:;" onClick={() => this.remove(index)}>删除</a>
                            </span>
                        </div>
                    ))
                }
                <Button type="dashed" onClick={this.add} style={{ width: 250 }}>
                    <Icon type="plus" /> 添加字段
                </Button>
            </div>
        );
    }
}

export default AddMessage;
